<script setup lang="ts">
import { Head } from '@vueuse/head'

import { chunk } from 'lodash'
console.log(chunk(['a', 'b', 'c', 'd'], 2))

const features = [
  {
    name: 'Competitive exchange rates',
    description:
      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
    icon: 'mdi:alpha-a-circle',
  },
  {
    name: 'No hidden fees',
    description:
      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
    icon: 'mdi:alpha-b-circle',
  },
  {
    name: 'Transfers are instant',
    description:
      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
    icon: 'mdi:alpha-c-circle',
  },
  {
    name: 'Mobile notifications',
    description:
      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
    icon: 'mdi:alpha-d-circle',
  },
]
</script>

<template>
  <Head>
    <title>Hello World</title>
  </Head>
  <div class="py-12 bg-white dark:bg-dark-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="lg:text-center">
        <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">
          Transactions
        </h2>
        <p
          class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl"
        >
          <!-- <icon-svg-github />
          <icon-svg-icon-park:good-two class="text-3xl" />
          <icon-svg-IconParkGoodTwo class="text-3xl" />
          <icon-IconParkGoodTwo class="text-3xl" /> -->
          <!-- <Icon class="text-3xl" icon="icon-park-good-two" />
          <Icon class="text-3xl" icon="icon-park:good-two" />
          <Icon class="text-3xl" icon="IconParkGoodTwo" />-->
          welcome use vue3
        </p>
        <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
          Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum
          cupiditate veritatis in accusamus quisquam.
        </p>
      </div>

      <div style="text-align: center">
        <!-- <img alt="Vue logo" src="@/assets/logo.png" /> -->
        <p><span v-t="'about'"></span> {{ $t('index') }} {{ $t('demotxt') }}</p>
      </div>

      <div class="mt-10">
        <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
          <div v-for="feature in features" :key="feature.name" class="relative">
            <dt>
              <div
                class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"
              >
                <Icon class="text-3xl" :icon="feature.icon" />
              </div>
              <p
                class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"
              >
                {{ feature.name }}
              </p>
            </dt>
            <dd class="mt-2 ml-16 text-base text-gray-500">
              {{ feature.description }}
            </dd>
          </div>
        </dl>
      </div>
    </div>
  </div>
</template>
